<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定</title>
	</head>
	<body>
		
		 <div id="app">
			 <!-- 实现数据自增
			 语法：v-on：click=“函数/直接计算”
			 2.简化语法：v-on：简化为@-->
			<span >数</span><span v-text="num"></span>
			<div >数</div><div v-text="num"></div>
			<br/>
			<button v-on:click="num++">自增</button>
			<button @click="num++">自增简化</button>
			<button @click="addNum">自增函数</button>
			<button @click="minusNum">自减函数</button>
		 </div>
		 <!-- 1.导入js文件-->
		 <script src="../js/vue.js"> </script>
		 <!-- 3.创建vue对象-->
		 <script>
			 
			const APP =new Vue({
				//1.注定区域
				el: "#app",
				data: {
					num: 100
				},
				methods:{
					addNum: function(){
						this.num++
					},
					minusNum(){
						this.num--
					}
				}
			})
		 </script>
	</body>
</html>
